import { Button, InputNumber } from "antd"
import "./Ddesign.css"

export default function Ddesign() {
    return (
        <div className='Ddesign'>
            <div className='app-left'>
                <div className='left-item'>
                    <label>宽：</label>
                    <InputNumber style={{ width: '85%' }} />
                </div>
                <div className='left-item'>
                    <label>高：</label>
                    <InputNumber style={{ width: '85%' }} />
                </div>
                <Button type="primary" block>生成</Button>
            </div>
            <div className='app-right'>
                <svg x="0" y="0" width="1px" height="1px" overflow="visible" viewBox="0 0 1 1">
                    <path transform="translate(-5, -5)" stroke-width="1.4978657353511837" stroke="#46ba00" d=" M0,498  L0,0  L488,0  L488,1  L691,1  L691,0  L1134,0  L1134,1  L1346,1  L1346,497  L1134,497  L1134,498  L691,498  L691,497  L488,497  L488,498  L0,498  Z " style={{ fill: "rgb(255, 255, 255)" }}></path>
                    {/* <g data-v-a33a3520="">
            <path data-v-a33a3520="" id="knifeFace_F" stroke-width="1.4978657353511837" fill="#ffffff" d=" M691,107.5  L1124,107.5  L1124,380.5  L691,380.5  L691,107.5  Z "></path>
            <path data-v-a33a3520="" id="knifeFace_FR" stroke-width="1.4978657353511837" fill="#ffffff" d=" M1124,107.5  L1336,107.5  L1336,380.5  L1124,380.5  L1124,107.5  Z "></path>
            <path data-v-a33a3520="" id="knifeFace_FL" stroke-width="1.4978657353511837" fill="#ffffff" d=" M478,107.5  L691,107.5  L691,380.5  L478,380.5  L478,107.5  Z "></path>
            <path data-v-a33a3520="" id="knifeFace_H" stroke-width="1.4978657353511837" fill="#ffffff" d=" M45,107.5  L478,107.5  L478,380.5  L45,380.5  L45,107.5  Z "></path>
            <path data-v-a33a3520="" id="knifeFace_HL" stroke-width="1.4978657353511837" fill="#ffffff" d=" M0,107.5  L45,107.5  L45,380.5  L0,380.5  L0,107.5  Z "></path>
            <path data-v-a33a3520="" id="knifeFace_HT" stroke-width="1.4978657353511837" fill="#ffffff" d=" M45,107.5  L45,0  L478,0  L478,1  L478,107.5  L45,107.5  Z "></path>
            <path data-v-a33a3520="" id="knifeFace_HB" stroke-width="1.4978657353511837" fill="#ffffff" d=" M45,488  L45,380.5  L478,380.5  L478,487  L478,488  L45,488  Z "></path>
            <path data-v-a33a3520="" id="knifeFace_FT" stroke-width="1.4978657353511837" fill="#ffffff" d=" M691,107.5  L691,1  L691,0  L1124,0  L1124,1  L1124,107.5  L691,107.5  Z "></path>
            <path data-v-a33a3520="" id="knifeFace_FB" stroke-width="1.4978657353511837" fill="#ffffff" d=" M691,488  L691,487  L691,380.5  L1124,380.5  L1124,487  L1124,488  L691,488  Z "></path>
            <path data-v-a33a3520="" id="knifeFace_FLT" stroke-width="1.4978657353511837" fill="#ffffff" d=" M478,107.5  L584.5,1  L691,107.5  L478,107.5  Z "></path>
            <path data-v-a33a3520="" id="knifeFace_FLB" stroke-width="1.4978657353511837" fill="#ffffff" d=" M478,380.5  L691,380.5  L584.5,487  L478,380.5  Z "></path>
            <path data-v-a33a3520="" id="knifeFace_FRT" stroke-width="1.4978657353511837" fill="#ffffff" d=" M1124,107.5  L1230.5,1  L1336,106.5  L1336,107.5  L1124,107.5  Z "></path>
            <path data-v-a33a3520="" id="knifeFace_FRB" stroke-width="1.4978657353511837" fill="#ffffff" d=" M1124,380.5  L1336,380.5  L1336,381.5  L1230.5,487  L1124,380.5  Z "></path>
            <path data-v-a33a3520="" id="knifeFace_HTL" stroke-width="1.4978657353511837" fill="#ffffff" d=" M45,107.5  L0,62.5  L0,0  L45,0  L45,107.5  Z "></path>
            <path data-v-a33a3520="" id="knifeFace_HBL" stroke-width="1.4978657353511837" fill="#ffffff" d=" M45,380.5  L45,488  L0,488  L0,425.5  L45,380.5  Z "></path>
            <path data-v-a33a3520="" id="knifeFace_HTR" stroke-width="1.4978657353511837" fill="#ffffff" d=" M478,107.5  L478,1  L584.5,1  L478,107.5  Z "></path>
            <path data-v-a33a3520="" id="knifeFace_FTL" stroke-width="1.4978657353511837" fill="#ffffff" d=" M691,107.5  L584.5,1  L691,1  L691,107.5  Z "></path>
            <path data-v-a33a3520="" id="knifeFace_FTR" stroke-width="1.4978657353511837" fill="#ffffff" d=" M1124,107.5  L1124,1  L1230.5,1  L1124,107.5  Z "></path>
            <path data-v-a33a3520="" id="knifeFace_FRT1" stroke-width="1.4978657353511837" fill="#ffffff" d=" M1230.5,1  L1336,1  L1336,106.5  L1230.5,1  Z "></path>
            <path data-v-a33a3520="" id="knifeFace_HBR" stroke-width="1.4978657353511837" fill="#ffffff" d=" M478,380.5  L584.5,487  L478,487  L478,380.5  Z "></path>
            <path data-v-a33a3520="" id="knifeFace_FBL" stroke-width="1.4978657353511837" fill="#ffffff" d=" M691,380.5  L691,487  L584.5,487  L691,380.5  Z "></path>
            <path data-v-a33a3520="" id="knifeFace_FBR" stroke-width="1.4978657353511837" fill="#ffffff" d=" M1124,380.5  L1230.5,487  L1124,487  L1124,380.5  Z "></path>
            <path data-v-a33a3520="" id="knifeFace_FRB1" stroke-width="1.4978657353511837" fill="#ffffff" d=" M1336,381.5  L1336,487  L1230.5,487  L1336,381.5  Z "></path>
            <path data-v-a33a3520="" id="knifeFace_HLT" stroke-width="1.4978657353511837" fill="#ffffff" d=" M0,107.5  L0,62.5  L0,62.5  L45,107.5  L0,107.5  Z "></path>
            <path data-v-a33a3520="" id="knifeFace_HLB" stroke-width="1.4978657353511837" fill="#ffffff" d=" M0,380.5  L45,380.5  L0,425.5  L0,425.5  L0,380.5  Z "></path>
          </g>
          <g data-v-a33a3520="">
            <path data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#2028b0" fill="none" d=" M0,107.5  L0,62.5  L0,0  L45,0  L478,0  L478,1  L584.5,1  L691,1  L691,0  L1124,0  L1124,1  L1230.5,1  L1336,1  L1336,106.5  L1336,107.5  L1336,380.5  L1336,381.5  L1336,487  L1230.5,487  L1124,487  L1124,488  L691,488  L691,487  L584.5,487  L478,487  L478,488  L45,488  L0,488  L0,425.5  L0,380.5  L0,107.5  Z "></path>
          </g>
          <g data-v-a33a3520="">
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="691" y1="107.5" x2="1124" y2="107.5"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="1124" y1="107.5" x2="1124" y2="380.5"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="1124" y1="380.5" x2="691" y2="380.5"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="691" y1="380.5" x2="691" y2="107.5"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="1124" y1="107.5" x2="1336" y2="107.5"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="1336" y1="380.5" x2="1124" y2="380.5"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="478" y1="107.5" x2="691" y2="107.5"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="691" y1="380.5" x2="478" y2="380.5"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="478" y1="380.5" x2="478" y2="107.5"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="45" y1="107.5" x2="478" y2="107.5"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="478" y1="380.5" x2="45" y2="380.5"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="45" y1="380.5" x2="45" y2="107.5"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="0" y1="107.5" x2="45" y2="107.5"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="45" y1="380.5" x2="0" y2="380.5"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="45" y1="107.5" x2="45" y2="0"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="478" y1="1" x2="478" y2="107.5"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="45" y1="488" x2="45" y2="380.5"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="478" y1="380.5" x2="478" y2="487"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="691" y1="107.5" x2="691" y2="1"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="1124" y1="1" x2="1124" y2="107.5"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="691" y1="487" x2="691" y2="380.5"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="1124" y1="380.5" x2="1124" y2="487"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="45" y1="107.5" x2="0" y2="62.5"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="0" y1="425.5" x2="45" y2="380.5"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="584.5" y1="1" x2="478" y2="107.5"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="691" y1="107.5" x2="584.5" y2="1"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="1230.5" y1="1" x2="1124" y2="107.5"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="1336" y1="106.5" x2="1230.5" y2="1"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="478" y1="380.5" x2="584.5" y2="487"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="584.5" y1="487" x2="691" y2="380.5"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="1124" y1="380.5" x2="1230.5" y2="487"></line>
            </g>
            <g data-v-a33a3520="">
              <line data-v-a33a3520="" stroke-width="1.4978657353511837" stroke="#fa0000" stroke-dasharray="1.1233993015133878 0.7489328676755919" x1="1230.5" y1="487" x2="1336" y2="381.5"></line>
            </g>
          </g>
          <g data-v-a33a3520=""></g> */}
                </svg>
            </div>
        </div>
    )
}
